<template>
  <h2>SonSon - 孙子组件</h2>
  <h3>孙子组件接收到{{ money }}</h3>
  <button @click="btn">点击花钱</button>
</template>

<script setup lang="ts">
/* 
  依赖注入：
    provide   翻译：提供(设置)
    inject    翻译：注入(获取)

  语法：
    provide('key', value)
    const value = inject('key')
*/
import { inject, Ref } from 'vue'

// 注意这里的泛型类型嵌套
const money = inject<Ref<number>>('money')
console.log(3, '孙子通过inject接收到的数据', money)

const btn = () => {
  // 如果 money 不为 undefined
  if (money) {
    money.value -= 50
  }
}
</script>
